<script setup lang="ts">
import '../../../assets/icon/iconfont.js'
import { ref, computed } from 'vue'
import { getTime } from '@/utils/time'
import { baseImgPath } from '@/utils/env'
import type { articleData } from '@/utils/interface'
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
    articleList: {
        type: Array as () => articleData[],
        default: () => [],
    },
    isChangeSmall: {
        type: Boolean,
        default: false
    },
    currentIndex: {
        type: Number,
        default: 0
    }
})


// 过渡动画控制
const isTransitioning = ref(false)
const transitionDirection = ref<'left' | 'right'>('right')

// 当前显示的文章对象
const currentItem = computed(() =>
    props.articleList[props.currentIndex])


const goToGalleryDetail = (id: number) => {
    router.push({
        name: 'galleryDetail',
        params: { id }
    })
}

</script>

<template>
    <div class="flex justify-center items-center gap-6">
        <transition :name="transitionDirection === 'left' ? 'slide-left' : 'slide-right'" mode="out-in">
            <div v-if="currentItem && !isTransitioning" :key="currentIndex" @click="goToGalleryDetail(currentItem.id)"
                class="relative group rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer
                w-full sm:h-[200px] md:h-[250px] lg:h-[300px] xl:h-[400px] bg-white">
                <div class="flex w-full h-full">
                    <div class="relative sm:w-2/3 xl:w-3/4 h-full">
                        <!-- 图库封面背景层 -->
                        <img :src="`${baseImgPath}/${currentItem.cover}`" alt="" loading="lazy"
                            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
                        <!-- 右侧渐变淡出层 -->
                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-white/90">
                        </div>
                        <!-- 右上角斜角切边区域 -->
                        <div class="absolute top-0 right-0 w-32 h-full bg-white/95"
                            style="clip-path: polygon(100% 0, 100% 100%, 80% 0);"></div>
                    </div>
                    <!-- 图库详情内容 -->
                    <div
                        class="relative p-4 sm:w-1/3 xl:w-1/4 bg-white/95 h-full z-10 flex flex-col justify-center items-center backdrop-blur-sm">
                        <div class="space-y-1 w-full">
                            <h1
                                class="font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300 font-sans tracking-wide break-words hyphens-auto
                            sm:text-lg sm:line-clamp-1 md:text-xl md:line-clamp-2 lg:text-2xl lg:line-clamp-3 xl:text-3xl xl:line-clamp-3">
                                {{ currentItem.title }}
                            </h1>
                            <p class="text-gray-600 group-hover:text-blue-500 transition-colors duration-300 font-medium
                            sm:text-sm md:text-base lg:text-lg xl:text-xl">
                                发布于{{ getTime(currentItem.created_at) }}
                            </p>
                            <div class="flex items-center justify-between text-gray-600">
                                <div class="flex items-center gap-1">
                                    <svg class="icon w-4 h-4" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg>
                                    <p class="font-medium sm:text-xs md:text-sm lg:text-base xl:text-xl">{{
                                        currentItem.comment }} 评论</p>
                                </div>
                            </div>
                            <div class="flex flex-wrap gap-2">
                                <div v-for="(tag, index) in currentItem.label" :key="tag" :class="[
                                    'inline-block px-3 py-1 rounded-full text-white font-medium text-xs transition-all duration-300',
                                    index % 3 === 0 ? 'bg-gradient-to-r from-blue-400 to-blue-500 hover:from-blue-500 hover:to-blue-600' :
                                        index % 3 === 1 ? 'bg-gradient-to-r from-amber-400 to-orange-400 hover:from-amber-500 hover:to-orange-500' :
                                            'bg-gradient-to-r from-rose-400 to-pink-400 hover:from-rose-500 hover:to-pink-500',
                                    'sm:hidden',
                                    'md:block md:text-xs',
                                    'lg:block lg:text-sm'
                                ]">
                                    {{ tag }}
                                </div>
                            </div>
                        </div>
                        <!-- 简介 -->
                        <p v-show="!props.isChangeSmall" class="mt-4 text-gray-700 leading-relaxed indent-6 line-clamp-3 font-sans
                            sm:text-xs md:text-sm lg:text-lg xl:text-xl">
                            {{ currentItem.introduce || '暂无简介' }}
                        </p>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<style scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon--large {
    width: 2em;
    height: 2em;
}

.icon--xl {
    width: 3em;
    height: 3em;
}

.clip-path-triangle-right {
    clip-path: polygon(100% 0, 100% 100%, 80% 0);
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    transition: all 0.3s ease-in-out;
}

.slide-right-enter-from {
    opacity: 0;
    transform: translateX(30px);
}

.slide-right-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}

.slide-left-enter-from {
    opacity: 0;
    transform: translateX(-30px);
}

.slide-left-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
